import React, { Component } from "react";
import { View, Text, Image, StyleSheet, TextInput,TouchableWithoutFeedback,SectionList} from "react-native";
import ScrollableTabView, { ScrollableTabBar,DefaultTabBar} from 'react-native-scrollable-tab-view';
import { statusBarHeight, width } from "../../util/apdater_util";
import PropTypes from "prop-types";

const SearchNavBar=({data,style,callback})=>{
  return (
    <View style={styles.navContainer}>
      <View style={styles.searchBox}>
        <Image style={styles.searchIcon} source={require('../../img/search_icon.png')}></Image>
        <TextInput style={styles.textInput} placeholder='搜一搜'></TextInput>
      </View>
      <TouchableWithoutFeedback onPress={callback}>
        <Text style={styles.cancel}>取消</Text>
      </TouchableWithoutFeedback>
    </View>
  )
}

class SearchCustomTabBar extends Component{
  constructor(props) {
    super(props);
  }
  static propTypes = {
    tabLabelNames: PropTypes.array, // tabs
    goToPage: PropTypes.func, // 跳转到对应tab的方法
    tabs: PropTypes.array,
    activeTab: PropTypes.number,
    onPress:PropTypes.func
  }
  render() {
    const containerWidth = this.props.containerWidth;
    const numberOfTabs = this.props.tabs.length;
    const translateX = this.props.scrollValue.interpolate({
      inputRange: [0, 1],
      outputRange: [0, containerWidth / numberOfTabs],
    });
    return (
      <View style={[this.props.style,styles.tabs]}>
        {this.props.tabs.map((tab,i)=>{
          return <TouchableWithoutFeedback style={styles.tabBox} key={tab} onPress={()=>this.props.goToPage(i)}>
            <View style={styles.tabBox}>
              <Text style={[styles.tab,i === this.props.activeTab?{fontSize:19,color:'#222222'}:{}, this.props.textStyle]}>{this.props.tabLabelNames[i].label}</Text>
              {i===this.props.activeTab?<Image style={styles.lineBar}  source={require('../../img/line_bar.png')}></Image>:null}
            </View>
          </TouchableWithoutFeedback>
        })}
      </View>
    );
  }
}

class SearchContentPage extends Component{
  constructor(props) {
    super(props);
    this.state={
      sections:[
        { key: "知识", data: [{ title: "阿童木" }, { title: "阿玛尼" }, { title: "爱多多" }] },
        { key: "资讯", data: [{ title: "表哥" }, { title: "贝贝" }, { title: "表弟" }, { title: "表姐" }, { title: "表叔" }] },
        { key: "话题", data: [{ title: "成吉思汗" }, { title: "超市快递" }] }
      ]
    }
  }
  _renderItem = (info) => {
    console.log(info)
    let key =info.section.key;
    console.log(key)
    if(key==='知识'){
      return (this._renderKnowledgeCell(info.item))
    }
    else if(key==='资讯'){
      return (this._renderInformationCell(info.item))
    }
    else if(key==='话题'){
      return (this._renderTopicCell(info.item))
    }
    else{
      return  null
    }
  }

  _renderKnowledgeCell=({data})=>{
    return (
      <View style={styles.cell}>
        <Image style={styles.knowledgeIcon} source={require('../../img/classroom.png')}></Image>
        <View style={{marginLeft:11,flex:1}}>
          <Text style={{color:'#0F0F0F',fontSize:15}}><Text style={{color:'#E39354'}}>人力资源</Text>管理六大模块知识
            讲解</Text>
          <Text style={{color:'#959595',fontSize:11,marginTop:16}}>21人已学习</Text>
        </View>
      </View>
    )
  }

  _renderInformationCell=({data})=>{
    return (
      <View style={styles.cell}>
        <View style={styles.info}>
          <Text style={{color:'#0F0F0F',fontSize:15}}>细数切尔西9号<Text style={{color:'#E39354',fontSize:15}}>人力资源</Text> 卢卡库能
            否破咒？ </Text>
          <View style={styles.infoFooter}>
            <Text style={{color:'#A6A6A6',fontSize:11}}>小报君</Text>
            <Text style={{color:'#A6A6A6',fontSize:11,marginLeft:20}}>4小时前</Text>
          </View>
        </View>
        <Image style={styles.infoIcon} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper1.png'}}></Image>
      </View>
    )
  }

  _renderTopicCell=({data})=>{
    return (
      <View style={styles.cell}>
        <Image style={styles.topicIcon} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper1.png'}}></Image>
        <View style={styles.topicInfo}>
          <Text style={{color:'#0F0F0F',fontSize:15,fontWeight:'500'}}><Text style={{color:'#3CA1FD',fontSize:15,fontWeight:'600'}}>#</Text>人力资源管理知识</Text>
          <Text style={{color:'#A6A6A6',fontSize:11,marginTop:18}}>讨论 1228.4万</Text>
        </View>
      </View>
    )
  }


  _sectionComp = (info) => {
    let txt = info.section.key;
    return <Text
      style={{ height: 36,lineHeight:36,paddingLeft:15, textAlignVertical: 'center', backgroundColor: '#F6F6F6', color: '#777777', fontSize: 13 }}>{txt}</Text>
  }

  _sectionFooter=(info)=>{
    return (
      <TouchableWithoutFeedback>
        <View style={styles.footer}>
          <Text style={{color:'#888888',fontSize:12}}>查看全部</Text>
          <Image style={styles.enterIcon} source={require('../../img/enter_icon.png')}></Image>
        </View>
      </TouchableWithoutFeedback>
    )
  }
  render(){
    return (
      <SectionList renderSectionHeader={this._sectionComp}
                   renderSectionFooter={this._sectionFooter}
                   renderItem={this._renderItem}
                   showsVerticalScrollIndicator={false}
                   sections={this.state.sections}>
      </SectionList>
    )
  }
}


class SearchPage extends Component{
  constructor(props) {
    super(props);
    this.tabView=null;
    this.state={
      tabList:[{
        label:'综合',
        index:1
      },{
        label:'知识',
        index:2
      },{
        label:'资讯',
        index:3
      },{
        label:'话题',
        index:4
      }]
    }
  }
  selectTabChange(i){
    if(this.tabView)this.tabView.goToPage(i)
  }
  onChangeTab(obj){
    console.log(obj)
    // this.setState({page:1})
  }

  render() {
    return (
      <View style={{flex:1}}>
        <SearchNavBar callback={()=>{this.props.navigation.pop()}}></SearchNavBar>
        <ScrollableTabView initialPage={0} ref={(tabView) => { this.tabView = tabView; }} prerenderingsiblingsNumber={1} scrollWithoutAnimation={false} onChangeTab={this.onChangeTab} onScroll={
          (position) => {
            console.log('滑动时的位置：' + position);
          }
        } locked={false} renderTabBar={()=><SearchCustomTabBar tabLabelNames={this.state.tabList} onPress={this.selectTabChange}/>}>
          <View tabLabel="Tab1" style={{flex: 1}}>
            <View style={{flex:1 ,width:'100%'}}>
              <SearchContentPage></SearchContentPage>
            </View>
          </View>
          <View tabLabel='Tab2' style={{flex: 1}}>
            <View style={{flex:1 ,width:'100%'}}>
              <Text>界面2</Text>
            </View>
          </View>
          <View tabLabel='Tab3' style={{flex: 1}}>
            <View style={{flex:1 ,width:'100%'}}>
              <Text>界面3</Text>
            </View>
          </View>
          <View tabLabel='Tab4' style={{flex: 1}}>
            <View style={{flex:1 ,width:'100%'}}>
              <Text>界面4</Text>
            </View>
          </View>
        </ScrollableTabView>
      </View>
    )
  }
}
export default module=SearchPage

const styles=StyleSheet.create({
  navContainer:{
    backgroundColor:'#fff',
    height:statusBarHeight+44,
    paddingTop:statusBarHeight,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center'
  },
  searchBox:{
    backgroundColor: '#F6F7F9',
    height: 30,
    borderRadius:15,
    marginLeft:14,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    flex:1
  },
  searchIcon:{
    marginLeft: 13,
    width: 13,
    height:13
  },
  textInput:{
    marginLeft:6
  },
  cancel:{
    color:'#000000',
    fontSize:14,
    width:60,
    height:44,
    lineHeight:44,
    textAlign:'center'
  },
  /**tab**/
  tabs:{
    height:40,
    backgroundColor:'#fff',
    flexDirection:'row',
    justifyContent:'space-around',
    alignItems:'center',
  },
  tabBox:{
    height:40,
    justifyContent: 'center',
    alignItems:'center'
  },
  tab:{
    color: '#666666',
    fontSize: 16,
    paddingLeft: 10,
    paddingRight:10
  },
  lineBar:{
    position:'absolute',
    width:20,
    height:3,
    bottom:0,
  },
  /**cell*/
  cell:{
    padding:15,
    backgroundColor:'#fff',
    flexDirection:'row',
    justifyContent:'flex-start'
  },
  knowledgeIcon:{
    width:115,
    height:65
  },
  info:{
    flex:1
  },
  infoIcon:{
    width:97,
    height:65,
    borderRadius: 7
  },
  infoFooter:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    marginTop:15
  },
  topicIcon:{
    width:55,
    height:55,
    borderRadius:7
  },
  topicInfo:{
    marginLeft:12
  },
  footer:{
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center',
    height:44,
    backgroundColor:'#fff'
  },
  enterIcon:{
    width:12,
    height:12,
    marginLeft:5
  }
})
